<template>
  <div class="schedules_content">
    <div v-init-screen-h>
      <div class="topBox add_btn_top">
        <el-button type="primary" class="addButton" size="mini" @click="add"
          ><i class="el-icon-plus" />添加
        </el-button>
      </div>
      <empty-data v-if="list.length == 0" />
      <el-row :gutter="20" v-else>
        <el-col
          :span="12"
          v-for="item in list"
          :key="item.id"
          :xs="24"
          :sm="6"
          :md="6"
          :xl="6"
          class="mb_sm"
        >
          <el-card shadow="always" :body-style="{ padding: '10px' }">
            <div slot="header" class="flex-x flex-space">
              <!-- <span style="font-weight: 600;">{{ item.name }}</span> -->
              <span style="color: #909399;font-size: 15px;">
                {{ item.createdDate | formatDate }}
              </span>
              <span>
                <el-button type="text" @click="edit(item)">编辑</el-button>
                <el-button type="text" @click="delJobs(item.token)"
                  >删除</el-button
                >
              </span>
            </div>
            <!-- card body -->
            <div style="margin-bottom: 10px;">
              <span style="margin-right: 4px;">
                触发器:
              </span>
              <span style="color: #909399;font-size: 15px;">
                {{ getScheduledLable(item.scheduleToken) }}
              </span>
            </div>
            <div style="margin-bottom: 10px;">
              <span style="margin-right: 4px;">
                类型:
              </span>
              <span style="color: #909399;font-size: 15px;">
                {{ getJobType(item.jobType) }}
              </span>
            </div>
            <div style="margin-bottom: 10px;">
              <span style="margin-right: 4px;">
                状态:
              </span>
              <span
                style="color: #909399;font-size: 15px;"
                v-if="item.jobState == 'Unsubmitted'"
              >
                未开始
              </span>
              <span
                style="color: #909399;font-size: 15px;"
                v-if="item.jobState == 'Active'"
              >
                激活
              </span>
              <span
                style="color: #909399;font-size: 15px;"
                v-if="item.jobState == 'Complete'"
              >
                完成
              </span>
            </div>
          </el-card>
        </el-col>
      </el-row>

      <!-- 添加/编辑 -->
      <Dialog
        :dialogVisible.sync="dialogVisible"
        @close="e => e && init()"
        ref="dialogRef"
        :scheduleList="scheduleList"
      ></Dialog>
    </div>
    <Pagination
      :total="total"
      :page="pageNum"
      :limit="pageSize"
      :page-sizes="pageSizes"
      @pagination="pagination"
    />
  </div>
</template>

<script>
import { getSchedulesList, getJobsList, delJobs } from "@/api/schedules";
import Dialog from "./components/Dialog";
import Pagination from "@/views/common/page";
import emptyData from "@/views/common/emptyData";
import _ from "lodash";
export default {
  components: {
    Dialog,
    emptyData,
    Pagination
  },
  computed: {
    getScheduledLable() {
      return function(token) {
        return (
          this.scheduleList.find(item => item.token == token)?.name || "--"
        );
      };
    },
    getJobType() {
      return function(value) {
        return this.options.find(item => item.value == value)?.label || "--";
      };
    }
  },
  data() {
    return {
      options: [
        {
          label: "能源能耗",
          value: "EnergyConsumption"
        },
        {
          label: "命令调用",
          value: "CommandInvocation"
        },
        {
          label: "批量命令调用",
          value: "BatchCommandInvocation"
        }
      ],
      dialogVisible: false,
      list: [],
      scheduleList: [],
      pageNum: 1,
      pageSize: 20,
      pageSizes: [20, 50, 100, 300],
      total: 0
    };
  },
  mounted() {
    this.init();
    this.getScheduleList();
  },
  methods: {
    pagination({ page, limit }) {
      this.pageNum = page;
      this.pageSize = limit;
      this.init();
    },
    getScheduleList() {
      getSchedulesList().then(res => {
        const { results } = res.data;
        this.scheduleList = results;
      });
    },
    async delJobs(token) {
      this.$confirm("是否确认删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(async () => {
        await delJobs(token);
        this.init();
        this.$msg({
          message: "删除成功",
          type: "success"
        });
      });
    },
    add() {
      this.dialogVisible = true;
    },
    edit(item) {
      this.dialogVisible = true;
      this.$nextTick(() => {
        let obj = { ...item };
        if (obj.jobState === "Unsubmitted") {
          obj.jobStateShow = "未开始";
        } else if (obj.jobState === "Active") {
          obj.jobStateShow = "激活";
        } else if (obj.jobState === "Complete") {
          obj.jobStateShow = "完成";
        } else {
          obj.jobStateShow = "";
        }
        this.$refs.dialogRef.form = _.cloneDeep(obj);
      });
    },
    init() {
      getJobsList().then(res => {
        const { results, numResults } = res.data;
        this.total = numResults;
        this.list = results;
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.schedules_content {
  padding: 10px;
  background-color: #fff;
  /deep/ {
    .el-card__header {
      padding: 6px 10px;
    }
  }
}
</style>
